<script setup lang="ts">
import { ref,watch } from 'vue'


//父组件传进来的
const props = defineProps({
    checkboxvalue:{
        type: Number,
        default: 0
    }
})

//返回事件
const emit = defineEmits(['update:checkboxvalue'])

//选项框状态
const checkbox = ref<number>(props.checkboxvalue);

//点击选项框事件
const clickchbox = ()=>{
  checkbox.value = checkbox.value+1;
  if (checkbox.value>2) {
    checkbox.value = 0;
  }
}
// 新增：监听输入框变化，通知父组件
watch(checkbox, (newValue) => {
  emit('update:checkboxvalue', newValue);
});

</script>

<template>
  <view class="container" @click="clickchbox" :style="{backgroundColor:checkbox==0?'#d1d1d1':'#ffffff'}">

    <text v-show="checkbox==1" class="text" > ✔</text>
    <text v-show="checkbox==2"class="text"> ✖</text>
  </view>
</template>

<style scoped>
.container{
    height: 13px;
    width: 13px;
    background-color: #a5a5a5;
    border:0.01px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
border-radius: 2px;
}
.text{
   font-size: 13px;
   color: #ca4343;
}
</style>


